<template>
    <div class="private-space">
        <div class="cover">
            <img :src="bgImage" alt="" class="bg">
        </div>
        
        <div class="container">
            <!-- 验证区域 -->
            <div class="auth-wrapper" v-if="!isAuthenticated">
                <div class="auth-card cards">
                    <h2>私密空间</h2>
                    <div class="auth-form">
                        <input type="password" 
                               v-model="password" 
                               placeholder="请输入访问密码" 
                               @keyup.enter="authenticate">
                        <button @click="authenticate">验证</button>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area" v-if="isAuthenticated">
                <div class="page-header">
                    <h1>私密空间</h1>
                    <p class="subtitle">记录个人投资与生活点滴</p>
                </div>

                <div class="grid-layout">
                    <!-- 今日投资小结卡片 -->
                    <div class="content-card cards">
                        <div class="card-header">
                            <h2>
                                <span class="icon">📝</span>
                                今日投资小结
                            </h2>
                            <div class="header-actions">
                                <span class="date">{{ today }}</span>
                                <el-button type="primary" link @click="showHistoryDialog">
                                    历史记录
                                </el-button>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="summary-content" v-if="dailySummary && isToday">
                                <p>{{ dailySummary.content }}</p>
                            </div>
                            <div class="no-content" v-else>
                                <p>今日暂无投资小结</p>
                            </div>
                        </div>
                    </div>

                    <!-- 持仓收益卡片 -->
                    <div class="content-card cards">
                        <div class="card-header">
                            <h2>
                                <span class="icon">💰</span>
                                持仓收益
                            </h2>
                            <div class="header-actions">
                                <div class="position-tabs">
                                    <button 
                                        :class="['tab-btn', currentTab === 'holding' ? 'active' : '']"
                                        @click="currentTab = 'holding'"
                                    >
                                        当前持仓
                                    </button>
                                    <button 
                                        :class="['tab-btn', currentTab === 'closed' ? 'active' : '']"
                                        @click="currentTab = 'closed'"
                                    >
                                        已清仓
                                    </button>
                                </div>
                                <!-- <el-button type="primary" link @click="showFullPortfolio">
                                    全部明细
                                </el-button> -->
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="total-profit-summary">
                                <div class="summary-item">
                                    <span class="label">总资产</span>
                                    <span class="value">¥{{ computedStats.totalAssets }}</span>
                                </div>
                                <div class="summary-item">
                                    <span class="label">总投入</span>
                                    <span class="value">¥{{ computedStats.totalInvestment }}</span>
                                </div>
                                <div class="summary-item">
                                    <span class="label">累计收益</span>
                                    <span :class="['value', computedStats.totalProfitRate >= 0 ? 'positive' : 'negative']">
                                        {{ computedStats.totalProfitRate >= 0 ? '+' : '' }}{{ computedStats.totalProfitRate }}%
                                    </span>
                                </div>
                                <div class="summary-item">
                                    <span class="label">在投数量</span>
                                    <span class="value">{{ computedStats.holdingCount }}支</span>
                                </div>
                            </div>
                            <div class="stock-list" v-if="currentTab === 'holding'">
                                <div class="stock-item" v-for="stock in holdingStocks" :key="stock.code">
                                    <div class="stock-info">
                                        <span class="stock-name">{{ stock.name }}</span>
                                        <span class="stock-code">{{ stock.code }}</span>
                                    </div>
                                    <div class="stock-data">
                                        <div class="data-item">
                                            <span class="label">持仓</span>
                                            <span class="value">{{ stock.amount }}股</span>
                                        </div>
                                        <div class="data-item">
                                            <span class="label">成本</span>
                                            <span class="value">{{ stock.cost }}元</span>
                                        </div>
                                        <div class="data-item">
                                            <span class="label">现价</span>
                                            <span class="value">{{ stock.current }}元</span>
                                        </div>
                                        <div class="data-item">
                                            <span class="label">盈亏</span>
                                            <span :class="['value', stock.profit >= 0 ? 'positive' : 'negative']">
                                                {{ stock.profit >= 0 ? '+' : '' }}{{ stock.profit }}%
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="stock-list" v-else>
                                <div class="stock-item" v-for="stock in closedStocks" :key="stock.code">
                                    <div class="stock-info">
                                        <span class="stock-name">{{ stock.name }}</span>
                                        <span class="stock-code">{{ stock.code }}</span>
                                    </div>
                                    <div class="stock-data">
                                        <div class="data-item">
                                            <span class="label">买入价</span>
                                            <span class="value">{{ stock.buyPrice }}元</span>
                                        </div>
                                        <div class="data-item">
                                            <span class="label">卖出价</span>
                                            <span class="value">{{ stock.sellPrice }}元</span>
                                        </div>
                                        <div class="data-item">
                                            <span class="label">持有天数</span>
                                            <span class="value">{{ stock.holdDays }}天</span>
                                        </div>
                                        <div class="data-item">
                                            <span class="label">总收益</span>
                                            <span :class="['value', stock.totalProfit >= 0 ? 'positive' : 'negative']">
                                                {{ stock.totalProfit >= 0 ? '+' : '' }}{{ stock.totalProfit }}%
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 替换原来的 el-dialog 部分 -->
    <div class="custom-dialog-wrapper" v-if="historyDialogVisible">
        <div class="custom-dialog-overlay" @click="historyDialogVisible = false"></div>
        <div class="custom-dialog">
            <div class="custom-dialog-header">
                <h3>历史投资小结</h3>
                <button class="close-btn" @click="historyDialogVisible = false">
                    <i class="el-icon-close"></i>
                </button>
            </div>
            <div class="custom-dialog-body">
                <el-timeline>
                    <el-timeline-item
                        v-for="item in summaryHistory"
                        :key="item.id"
                        :timestamp="item.date"
                        placement="top"
                        type="primary"
                    >
                        <div class="history-card">
                            <div class="history-card-content">
                                <p class="summary-text">{{ item.content }}</p>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="custom-dialog-footer">
                <button class="custom-button" @click="historyDialogVisible = false">关闭</button>
            </div>
        </div>
    </div>

    <!-- 添加全部持仓明细弹框 -->
    <div class="custom-dialog-wrapper" v-if="portfolioDialogVisible">
        <div class="custom-dialog-overlay" @click="portfolioDialogVisible = false"></div>
        <div class="custom-dialog">
            <div class="custom-dialog-header">
                <h3>持仓明细</h3>
                <button class="close-btn" @click="portfolioDialogVisible = false">
                    <i class="el-icon-close"></i>
                </button>
            </div>
            <div class="custom-dialog-body">
                <div class="portfolio-detail">
                    <div class="detail-section">
                        <h4>当前持仓</h4>
                        <div class="detail-list">
                            <div class="detail-item" v-for="stock in holdingStocks" :key="stock.code">
                                <div class="detail-header">
                                    <span class="stock-name">{{ stock.name }}</span>
                                    <span class="stock-code">{{ stock.code }}</span>
                                </div>
                                <div class="detail-info">
                                    <div class="info-item">
                                        <span class="label">持仓数量</span>
                                        <span class="value">{{ stock.amount }}股</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">成本价</span>
                                        <span class="value">{{ stock.cost }}元</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">现价</span>
                                        <span class="value">{{ stock.current }}元</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">浮动盈亏</span>
                                        <span :class="['value', stock.profit >= 0 ? 'positive' : 'negative']">
                                            {{ stock.profit >= 0 ? '+' : '' }}{{ stock.profit }}%
                                        </span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">市值</span>
                                        <span class="value">{{ (stock.current * stock.amount).toFixed(2) }}元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detail-section">
                        <h4>已清仓记录</h4>
                        <div class="detail-list">
                            <div class="detail-item" v-for="stock in closedStocks" :key="stock.code">
                                <div class="detail-header">
                                    <span class="stock-name">{{ stock.name }}</span>
                                    <span class="stock-code">{{ stock.code }}</span>
                                </div>
                                <div class="detail-info">
                                    <div class="info-item">
                                        <span class="label">买入价</span>
                                        <span class="value">{{ stock.buyPrice }}元</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">卖出价</span>
                                        <span class="value">{{ stock.sellPrice }}元</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">持有天数</span>
                                        <span class="value">{{ stock.holdDays }}天</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">总收益</span>
                                        <span :class="['value', stock.totalProfit >= 0 ? 'positive' : 'negative']">
                                            {{ stock.totalProfit >= 0 ? '+' : '' }}{{ stock.totalProfit }}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="custom-dialog-footer">
                <button class="custom-button" @click="portfolioDialogVisible = false">关闭</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
import bgImage from '@/views/home/img/bg.jfif'
import investment from '@/http/apis/investment'
import portfolioData from '@/assets/data/portfolio.md?raw'

// 简化验证逻辑，只使用一个本地存储项
const isAuthenticated = ref(localStorage.getItem('privateAuth') === 'true')
const password = ref('')
const today = ref('')
const currentTab = ref('holding')

// 投资小结数据
const dailySummary = ref({
    date: '2024-03-21',
    content: '今日A股市场震荡上行，沪指收涨0.8%。继续持有核心品种，对部分高位股票进行了减仓操作。密切关注政策面变化，继续观察量能变化。'
})

// 添加历史记录相关的响应式变量
const historyDialogVisible = ref(false)

// 持仓数据
const holdingStocks = ref([])
const closedStocks = ref([])
const portfolioStats = ref({
    totalAssets: 0,
    totalInvestment: 0,
    totalProfitRate: 0,
    holdingCount: 0
})

// 恢复 summaryHistory 的定义
const summaryHistory = ref([
    {
        id: 1,
        date: '2024-03-21',
        content: '今日A股市场震荡上行，沪指收涨0.8%。继续持有核心品种，对部分高位股票进行了减仓操作。密切关注政策面变化，继续观察量能变化。'
    },
    {
        id: 2,
        date: '2024-03-20',
        content: '市场情绪回暖，两市成交量有所放大。持仓品种遍上继续持有观望。'
    },
    {
        id: 3,
        date: '2024-03-19',
        content: '指数小幅调整，市场分化明显。重点关注低估值板块机会，适度加仓优质标的。'
    }
])

// 获取持仓统计数据
const getPortfolioStats = () => {
    try {
        const statsMatch = portfolioData.match(/## Stats\s*({[\s\S]*?})/m)
        if (statsMatch) {
            const stats = JSON.parse(statsMatch[1])
            portfolioStats.value = {
                totalAssets: stats.total_assets,
                totalInvestment: stats.total_investment,
                totalProfitRate: 0,
                holdingCount: 0
            }
        }
    } catch (error) {
        console.error('获取持仓统计失败:', error)
    }
}

// 添加计算属性
const computedStats = computed(() => {
    const holdings = holdingStocks.value
    
    // 使用 md 文件中的总资产和总投入
    const totalAssets = portfolioStats.value.totalAssets
    const totalInvestment = portfolioStats.value.totalInvestment
    
    // 计算累计收益率
    const totalProfitRate = totalInvestment > 0 
        ? ((totalAssets - totalInvestment) / totalInvestment * 100).toFixed(2)
        : '0.00'
    
    // 计算在投数量
    const holdingCount = holdings.length

    return {
        totalAssets: totalAssets.toFixed(2),
        totalInvestment: totalInvestment.toFixed(2),
        totalProfitRate,
        holdingCount
    }
})

// 获取持仓列表
const getPortfolioList = () => {
    try {
        const holdingsMatch = portfolioData.match(/## Holdings\s*(\[[\s\S]*?])/m)
        if (holdingsMatch) {
            const holdings = JSON.parse(holdingsMatch[1])
            holdingStocks.value = holdings.map((item: any) => ({
                name: item.name,
                code: item.code,
                amount: item.amount,
                cost: item.cost,
                current: item.current,
                profit: ((item.current - item.cost) / item.cost * 100).toFixed(2)
            }))
        }
    } catch (error) {
        console.error('获取持仓列表失败:', error)
    }
}

// 获取已清仓列表
const getClosedList = () => {
    try {
        const closedMatch = portfolioData.match(/## Closed\s*(\[[\s\S]*?])/m)
        if (closedMatch) {
            const closed = JSON.parse(closedMatch[1])
            closedStocks.value = closed.map((item: any) => ({
                name: item.name,
                code: item.code,
                buyPrice: item.buy_price,
                sellPrice: item.sell_price,
                holdDays: item.hold_days,
                // 计算总收益率
                totalProfit: ((item.sell_price - item.buy_price) / item.buy_price * 100).toFixed(2)
            }))
        }
    } catch (error) {
        console.error('获取已清仓列表失败:', error)
    }
}

// 监听标签切换
watch(currentTab, (newTab) => {
    if (newTab === 'closed') {
        getClosedList()
    } else {
        getPortfolioList()
    }
})

// 获取今日投资小结
const getTodaySummary = async () => {
    try {
        const res = await investment.getSummaryList()
        if (res.code === 200 && res.data.length > 0) {
            // 获取最新的一条小结
            const latestSummary = res.data[0]
            dailySummary.value = {
                date: latestSummary.date,
                content: latestSummary.content
            }
        }
    } catch (error) {
        console.error('获取投资小结失败:', error)
    }
}

// 获取历史投资小结
const getHistorySummary = async () => {
    try {
        const res = await investment.getSummaryList()
        if (res.code === 200) {
            summaryHistory.value = res.data
        }
    } catch (error) {
        console.error('获取历史投资小结失败:', error)
    }
}

// 显示历史记录弹框
const showHistoryDialog = () => {
    historyDialogVisible.value = true
    getHistorySummary()
}

// 验证密码
const authenticate = () => {
    if (password.value === '123456') {
        isAuthenticated.value = true
        localStorage.setItem('privateAuth', 'true')
    } else {
        alert('密码错误')
        password.value = ''
    }
}

// 在 script setup 部分添加 computed 属性
const isToday = computed(() => {
    if (!dailySummary.value?.date) return false
    return dailySummary.value.date === today.value
})

// 在 script setup 中添加
const portfolioDialogVisible = ref(false)

// 添加显示弹框的方法
const showFullPortfolio = () => {
    portfolioDialogVisible.value = true
    // 确保数据是最新的
    getPortfolioList()
    getClosedList()
}

onMounted(() => {
    const date = new Date()
    today.value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    getTodaySummary()
    getHistorySummary()
    getPortfolioStats() // 从 md 文件获取统计数据
    getPortfolioList() // 从 md 文件获取持仓列表
})
</script>

<style scoped>
.private-space {
    min-height: 100vh;
    position: relative;
    color: #fff;
    background-color: #1a1a1a;
}

.cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.cover .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) brightness(0.3);
    transform: scale(1.1);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* 验证卡片样式 */
.auth-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-card {
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.auth-form {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

.auth-form input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.auth-form button {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
}

.auth-form button:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 内容区域样式 */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.cards {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    transition: transform 0.3s;
}

.cards:hover {
    transform: translateY(-5px);
}

.content-card {
    padding: 1.5rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
}

.add-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

/* 股票记录样式 */
.stock-record {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stock-record:last-child {
    border-bottom: none;
}

.record-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.date {
    color: rgba(255, 255, 255, 0.7);
}

.profit {
    font-weight: bold;
}

.profit.positive {
    color: #F56C6C;  /* 红色 */
}

.profit.negative {
    color: #67C23A;  /* 绿色 */
}

.record-content {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* 统计网格样式 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .grid-layout {
        grid-template-columns: 1fr;
    }

    .auth-form {
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* 添加新样式 */
.daily-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-input {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    resize: vertical;
}

.save-btn, .history-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
}

.save-btn:hover, .history-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.stock-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stock-item {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.stock-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.stock-name {
    font-weight: bold;
}

.stock-code {
    color: rgba(255, 255, 255, 0.7);
}

.stock-data {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.data-item .label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
}

.data-item .value {
    font-weight: bold;
}

.date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .stock-data {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.summary-content {
    padding: 1rem;
}

.summary-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    white-space: pre-line;
}

.no-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 2rem 0;
}

.position-tabs {
    display: flex;
    gap: 0.5rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.total-profit-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 6px;
    margin-bottom: 1rem;
    z-index: 1;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.summary-item .label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.summary-item .value {
    font-size: 1.25rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    .total-profit-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

:deep(.el-timeline-item__node) {
    background-color: var(--el-color-primary);
}

:deep(.el-timeline-item__timestamp) {
    color: rgba(255, 255, 255, 0.7);
}

.summary-text {
    white-space: pre-line;
    line-height: 1.6;
}

:deep(.el-dialog) {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

:deep(.el-dialog__title) {
    color: #fff;
}

:deep(.el-dialog__body) {
    color: #fff;
    max-height: 60vh;
    overflow-y: auto;
}

:deep(.el-card) {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    margin-bottom: 1rem;
}

:deep(.el-card__body) {
    padding: 1rem;
}

:deep(.el-button--primary) {
    background: transparent;
    border: none;
    padding: 0;
    
    &:hover {
        color: var(--el-color-primary-light-3);
    }
}

/* 修改弹框关样式 */
:deep(.history-dialog .el-overlay) {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

:deep(.history-dialog.el-dialog) {
    background: rgba(22, 24, 29, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 15vh;
}

:deep(.history-dialog .el-dialog__header) {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.history-dialog .el-dialog__title) {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    font-weight: 500;
}

:deep(.history-dialog .el-dialog__close) {
    color: rgba(255, 255, 255, 0.6);
}

:deep(.history-dialog .el-dialog__body) {
    background: rgba(22, 24, 29, 0.95);
    color: rgba(255, 255, 255, 0.9);
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

:deep(.history-dialog .el-dialog__footer) {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 滚动条样式 */
:deep(.history-dialog .el-dialog__body::-webkit-scrollbar) {
    width: 6px;
}

:deep(.history-dialog .el-dialog__body::-webkit-scrollbar-thumb) {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

:deep(.history-dialog .el-dialog__body::-webkit-scrollbar-track) {
    background: rgba(0, 0, 0, 0.1);
}

.history-content {
    padding: 0 10px;
}

.history-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.history-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.history-card .summary-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    white-space: pre-line;
    margin: 0;
}

.custom-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.custom-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* 定义弹框样式 */
.custom-dialog-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.custom-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.custom-dialog {
    position: relative;
    width: 60%;
    max-width: 800px;
    background: rgba(22, 24, 29, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 2001;
}

.custom-dialog-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-dialog-header h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    font-weight: 500;
}

.close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    transition: color 0.3s;
}

.close-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

.custom-dialog-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(22, 24, 29, 0.95);
}

.custom-dialog-body::-webkit-scrollbar {
    width: 6px;
}

.custom-dialog-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.custom-dialog-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.custom-dialog-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .custom-dialog {
        width: 90%;
        margin: 20px;
    }
}

/* 修改所有盈亏相关的颜色 */
.positive, 
.data-item .value.positive,
.summary-item .value.positive {
    color: #F56C6C;  /* 红色 */
}

.negative,
.data-item .value.negative,
.summary-item .value.negative {
    color: #67C23A;  /* 绿色 */
}

/* 修改持仓收益卡片的内容区域样式 */
.card-content {
    max-height: 500px;  /* 设置最大高度 */
    overflow-y: auto;   /* 添加垂直滚动 */
}

/* 添加滚动条样式 */
.card-content::-webkit-scrollbar {
    width: 6px;
}

.card-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.card-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

/* 确保总收益摘要固定在顶部 */
.total-profit-summary {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    margin-bottom: 1rem;
    z-index: 1;
}

/* 股票列表样式调整 */
.stock-list {
    max-height: 400px;  /* 设置最大高度 */
    overflow-y: auto;   /* 添加垂直滚动 */
    padding: 0 1rem;
}

/* 添加滚动条样式 */
.stock-list::-webkit-scrollbar {
    width: 6px;
}

.stock-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.stock-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

/* 确保总收益摘要固定在顶部 */
.total-profit-summary {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.portfolio-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.detail-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
}

.detail-section h4 {
    margin: 0 0 1rem 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 1rem;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.info-item .value {
    font-size: 1.1rem;
    font-weight: 500;
}
</style> 